{% load static %}
<!DOCTYPE html>
<html lang="">
<head>
    <title>wz</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script src="{% static 'js/vue.js' %}"></script>
    <script src="{% static 'quill/quill_editor.js' %}"></script>
    <script src="{% static 'js/axios.js' %}"></script>
    <script src="{% static 'element-ui/index.js' %}"></script>
    <link rel="stylesheet" href="{% static 'element-ui/index.css' %}">
    <link rel="stylesheet" href="{% static 'quill/quill.css' %}">
    <link rel="stylesheet" href="{% static 'css/wz.css' %}">
</head>
<body>
<div id="base">
    <div class="left">
        <!-- 摘要 -->
        <div class="zhaiyao" v-html="article.zhaiyao">
        </div>
        <!-- 简介 -->
        <div class="jianjie">
            <!-- 作者头像 -->
            <div style="position: absolute;width:120px;height: 120px;top:20%;border-radius: 50%;left:5%">
                 <el-avatar :size="120" :src="article.uimg"></el-avatar>
            </div>
            <div style="position: absolute;left: 50%;width: auto;text-align: left;top: 20%;height: 24px;font-size: 22px;font-style: italic;font-weight: lighter" v-text="article.nickname">
            </div>
            <div style="position: absolute;left: 50%;width: auto;text-align: left;top: 40%;height: 24px;font-size: 22px;font-style: italic;font-weight: lighter">
                <el-button icon="el-icon-house" @click="isFlipped=!isFlipped" v-show="!isFlipped">查看主页</el-button>
                <el-button icon="el-icon-back" @click="isFlipped=!isFlipped" v-show="isFlipped">返回</el-button>
            </div>
            <div style="position: absolute;left: 50%;width: auto;text-align: left;top: 65%;height: 24px;font-size: 22px;font-style: italic;font-weight: lighter">
                <el-button icon="el-icon-plus" type="primary">添加好友</el-button>
            </div>
        </div>
    </div>
    <div class="right" :class="{ flipped: isFlipped }">
        <div class="front">
            <!-- 文章 -->
            <div class="title" v-text="article.title">
            </div>
            <div class="art" v-html="article.content"></div>
        </div>
        <div class="back">
            <div style="position: absolute;width: 20%;height: 20%;left: 40%;top:40%">
                <h2>功能开发中</h2>
            </div>
        </div>

    </div>
</div>
<script>

</script>
<script src="{% static 'js/wz.js' %}"></script>
</body>
</html>
